<template>
    <div class="xtx-checkbox" @click="changeChecked">
        <i :class="modelValue ? 'icon-checked' : 'icon-unchecked'" class="iconfont"></i>
        <span v-if="$slots.default">
            <slot />
        </span>
        <span v-else-if="label"> {{ label }} </span>
    </div>
</template>

<script>
export default {
    name: 'XtxCheckbox',
}
</script>

<script setup>
// import { defineEmits } from 'vue'
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    label: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['update:modelValue', 'change'])

const changeChecked = () => {
    console.log(123);
    emit('update:modelValue', !props.modelValue)
    emit('change')
}
</script>

<style scoped lang="less">
.xtx-checkbox {
    display: inline-block;
    margin-right: 2px;
    cursor: pointer;
    user-select: none;

    .icon-checked {
        color: @xtxColor;

        ~span {
            color: @xtxColor;
        }
    }

    i {
        position: relative;
        top: 1px;
    }

    span {
        margin-left: 2px;
    }
}
</style>